<template>
	<view>
		<view class="top">
			<view class="search">
				<uni-easyinput class="innersearch" prefixIcon="search" v-model="inputvalue" placeholder="左侧图标" @iconClick="iconClick"></uni-easyinput>
			</view>
			<view class="btn2">
				<navigator :url="'/pages/index/carWash/washcar'">
					<text>列表模式</text>
				</navigator>
			</view>
		</view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 600px" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
			</view>
		</view>
		<view @click="gowash">
			<view class="content">
				<navigator class="a">
					<view class="mid">
						<view class="name">伟业汽车美容店（人民路店）</view>
						<view class="rate">
							<uni-rate v-model="rateValue" @change="onChange" />
							<text>3分</text>
						</view>
						<view class="bhours">营业时间:周一至周五 早上8:00-晚上22:00</view>
						<view class="local">中原区莲花街32号</view>
					</view>

					<view class="right">
						<view>556m</view>
						<image src="@/static/article01.png" mode=""></image>
					</view>
				</navigator>
				<view class="dao">
					<button class="button" type="primary" @click="toggle('bottom')"><text class="button-text">联系门店</text></button>
					<view>
						<!-- 普通弹窗 -->
						<uni-popup ref="popup" background-color="#fff" @change="change" class="popup">
							<view class="popupone"><text>18838247890</text></view>
							<navigator class="popupt"><text>呼叫</text></navigator>
							<view @click="dialogClose()" class="popupt"><text>取消</text></view>
						</uni-popup>
					</view>
					<button>立即预定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rateValue: 0,
			type: 'center',

			value: '',
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '@/static/定位2@2x.png'
				},
				{
					latitude: 39.9,
					longitude: 116.39,
					iconPath: '@/static/定位2@2x.png'
				}
				
			]
		};
	},
	onShow() {
		this.covers = [
			{
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '/static/定位2@2x.png',
			
			},
			{
				latitude: 39.905065,
				longitude: 116.393857,
				iconPath: '/static/定位2@2x.png'
			}
		];
	},
	onLoad() {
		// 模拟动态赋值
		setTimeout(() => {
			this.rateValue = 3;
		}, 1000);
	},
	methods: {
		
		onChange(e) {
			console.log('rate发生改变:' + JSON.stringify(e));
			// console.log(this.rateValue);
		},
		toggle(type) {
			this.type = type;
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open(type);
		},
		dialogClose() {
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.close();
		},
		gowash(){
			uni.navigateTo({
				url:"/pages/index/carWash/carWash"
			})

		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.top {
	display: flex;
}
.search {
	width: 270px;
	height: 45px;
	background-color: #efeff5;
	margin-left: 10px;
}
.innersearch {
	width: 260px;
	height: 28px;
	margin: 4px 6px 4px 4px;
}
.btn2 {
	margin-left: 10px;
	margin-top: 5px;
}
.btn2 text {
	font-weight: bold;
}
.content {
	width: 372px;
	height: 170px;
	border: 1px solid #f2f2f2;
	background-color: #f2f2f2;
	margin: 3px auto;
	background-color: #fff;
	position: fixed;
	bottom: 0px;
}

.a {
	display: flex;
}
.a image {
	width: 100px;
	height: 66px;
	margin: 14px 10px 17px 16px;
}
.name {
	/* width: 130px; */
	height: 25px;
	margin-top: 15px;
	font-size: 16px;
	font-weight: bold;
	margin-left: 10px;
}
.dao {
	display: flex;
}
.dao button {
	background-color: #0055ff;
	color: #fff;
	width: 130px;
	height: 40px;
	border-radius: 30px;
	margin-top: 10px;
}
.dao button:nth-child(3) {
	background-color: #ff4000;
	color: #fff;
	width: 130px;
	border-radius: 30px;
	margin-top: 10px;
}
.local {
	margin-top: 8px;
	margin-left: 10px;
	font-size: 12px;
}
.bhours {
	font-size: 12px;
	margin-left: 10px;
}
.right {
	width: 50px;
	height: 90px;
	color: #0055ff;
	margin-top: 10px;
}

.right view {
	margin-left: 80px;
}
.img image {
	width: 24px;
	height: 24px;
	margin-top: 30px;
	margin-left: 0px;
}
.rate {
	display: flex;
	margin-left: 10px;
}
.rate text {
	margin-left: 20px;
}
.popup {
	text-align: center;
}

.popupone {
	margin-top: 20px;
}
.popupt {
	height: 50px;
	line-height: 50px;
	border-top: 1px solid #f2f2f2;
}
</style>
